<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>HTTP请求状态码</title>
    <link href="https://www.sunyuchao.com/static/layui/css/layui.css" th:href="@{/layui/css/layui.css}" rel="stylesheet">

    <link href="https://www.sunyuchao.com/static/css/fontawesome4.7.0/css/font-awesome.css" th:href="@{/css/fontawesome4.7.0/css/font-awesome.css}" rel="stylesheet">
    <link href="https://www.sunyuchao.com/static/css/utilscommon.css" th:href="@{/css/utilscommon.css}" rel="stylesheet">
    <link href="https://www.sunyuchao.com/static/css/common.css" rel="stylesheet" th:href="@{/css/common.css}">
    <link href="https://www.sunyuchao.com/static/css/reply.css" rel="stylesheet" th:href="@{/css/reply.css}">

    <script th:src="${iconfontUrl}"></script>

    <style>
        .tab-wrap{background-color: white;padding: 3px 10px;margin-top: 10px;}
        .tab-wrap .tab-wrap-square{padding: 5px;margin-bottom: 10px;position: relative;border-bottom: 1px solid #e7e7e7;
            padding-bottom: 10px;padding-top: 12px;}
        .tab-wrap .tab-wrap-square::after {
            position: absolute;
            left: 0;
            bottom: 0;
            height: 2.5px!important;
            width: 100px;
            background-color: #51aded;
            content: '';
            transition:width 2s;
            -moz-transition:width 2s; /* Firefox 4 */
            -webkit-transition:width 2s; /* Safari and Chrome */
            -o-transition:width 2s; /* Opera */
        }
        /*鼠标悬停div修改子元素样式*/
        .tab-wrap:hover .tab-wrap-square:first-child::after{
            width: 400px;
        }

        .tab-wrap .reply-all-head{font-size: 18px;font-weight: bold;}
    </style>
</head>
<body>
<!--搜索-->
<div th:replace="index :: search"></div>
<!--右下角固定-->
<div th:replace="index :: permanent"></div>
<div th:replace="notice :: top"></div>
<div class="content">
    <h1 class="square">
        <span class="f-right">天若有情天亦老，人间正道是沧桑 —— 毛泽东</span>
    </h1>
    <input type="hidden" th:value="${bindId}" name="id">
    <div class="left">
        <h2>HTTP请求状态码</h2>
        <table class="layui-table">
            <colgroup>
                <col width="150">
                <col width="200">
                <col>
            </colgroup>
            <thead>
            <tr>
                <th>状态码</th>
                <th>代表标志</th>
                <th>描述</th>
            </tr>
            </thead>
            <tbody id="tbody">
            </tbody>
        </table>
        <div id="demo2"></div>

        <div class="tab-wrap" style="padding: 10px 20px;">
            <h3 class="tab-wrap-square">留言评论</h3>

            <div th:replace="message :: messageBox"></div>
            <h2 class="reply-all-head">所有回复</h2>
            <div th:replace="message :: comment"></div>
            <div th:if="${pageTotal != 0}" class="layui-btn-container" style="margin-top: 20px;">
                <a th:href="@{/util/httpStatusCode(page=${page-1},bindId=${bindId})}" th:class="${page == 1 ? 'layui-btn layui-btn-disabled':'layui-btn'}"> <i class="layui-icon layui-icon-left"></i></a>
                <a th:href="@{/util/httpStatusCode(page=${num},bindId=${bindId})}" th:class="${num == page ? 'layui-btn layui-btn-normal':'layui-btn'}" th:each="num : ${pageNumList}" th:text="${num}"></a>
                <a th:href="@{/util/httpStatusCode(page=${page+1},bindId=${bindId})}" th:class="${page == pageTotal ? 'layui-btn layui-btn-disabled':'layui-btn'}"> <i class="layui-icon layui-icon-right"></i></a>
            </div>
        </div>
    </div>
    <div class="right">
        <div style="width: 100%;height: 200px;background-color: #cdd;margin-top: 20px;">

        </div>
        <div style="width: 100%;height: 200px;background-color: #cdf;margin-top: 20px;">

        </div>
        <div style="width: 100%;height: 200px;background-color: #dfc;margin-top: 20px;">

        </div>
    </div>
</div>


<script src="https://www.sunyuchao.com/static/js/heart.js"></script>
<script src="https://www.sunyuchao.com/static/layui/layui.js"></script>
<script src="https://www.sunyuchao.com/static/js/jquery3.3.1.min.js"></script>
<script src="https://www.sunyuchao.com/static/js/common.js"></script>
<script src="https://www.sunyuchao.com/static/js/reply.js"></script>
<!--子回复模板-->
<script type="text/template" id="childMsg">
    <div class="msg-history">
        <div class="mh-left">
            <img class="radius" src="{avatar}" width="40" height="40">
        </div>
        <div class="mh-right">
            <input type="hidden" class="userId" value="{userId}">
            <p>
                <span style="float: left;"><span><a class="comment" href="javascript:;">{commentUsername}</a></span> 回复  <span>
                    <a href="javascript:;" class="commented">{commentedUsername}</a></span></span>
                <span style="float: right;" class="timeago" datetime="{time}"></span>
            </p>
            <p class="reply-content">
                {content}
            </p>
            <p class="operate">
                <span class="muted"> <a onclick="openChildReply(this)" href="javascript:;">回复</a></span>
            </p>
        </div>
        <hr>
    </div>
    <div class="layui-clear"></div>
</script>
<!--1级回复模板-->
<script type="text/template" id="FirstMsg">
    <li class="item">
        <div class="item-left">
            <img class="radius" src="{avatar}" width="50" height="50">
        </div>
        <div class="item-right">
            <p>
                <span style="float: left;"><a href="javascript:;" class="floor">{commentUsername}</a></span>
                <span style="float: right;" class="timeago" datetime="{time}"></span>
            </p>
            <p class="reply-content">
                {content}
            </p>
            <p class="operate">
                <span class="muted"> <a class="show" onclick="show(this)" href="javascript:;">展开</a>(<span>0</span>)</span>
                <span class="muted"> <a onclick="openReply(this)" href="javascript:;">回复</a></span>
                <span class="muted"> <a href="#"><i class="layui-icon layui-icon-praise"></i>17</a></span>
                <span class="muted"> <a href="#"><i class="layui-icon layui-icon-tread"></i>17</a></span>
            </p>
            <div class="msg-content">

            </div>
            <div class="item-child-smbx">
                <input type="hidden" class="receiverUserId" value="{commentId}">
                回复 <span class="receiver">{commentUsernameCopy}</span>
                <div contenteditable="true" class="layui-textarea" placeholder=""></div>
                <div class="smb-r-bottom">
                    <a onclick="loadFace(this)" href="javascript:;"><img src="/layui/images/face/1.gif"></a>
                    <div class="face-frame"></div>
                    <button onclick="saveMsg(this)" class="layui-btn layui-btn-normal" style="float: right;margin-right: 8px;">留言</button>
                </div>
            </div>

        </div>
        <div class="layui-clear"></div>
    </li>
</script>

<script th:inline="javascript">
    var currentUser=[[${session.loginUser}]];
    var currentUserId;
    if(currentUser != null){
        currentUserId=currentUser.id;
    }
</script>
<script>
    /**
     * 留言给我
     * */
    function msgToMe(obj) {
        var frameObj = $(obj).parent().prev();
        var replyEntity={};
        replyEntity.content = $(frameObj).html().replace(/&nbsp;/ig,'');;//回复内容
        replyEntity.commentedUserId=1;//被回复者默认是我（生产中放到后台）
        replyEntity.level = 1;
        replyEntity.type = 3;
        replyEntity.userId=currentUserId;
        replyEntity.bindId=$("input[name=id]").val();
        if($.trim(replyEntity.content).length == 0){
            alert("请输入内容")
            return false;
        }
        var retInfo={};
        var flag=false;
        $.ajax({
            url:"/userComment/saveFirstMessage",
            type:"POST",
            data:replyEntity,
            async:false,
            success:function (e) {
                if(e.success){
                    retInfo=e.data;
                    flag=true;
                }else{
                    layui.layer.alert(e.message);
                }
            },dataType: "json"
        });
        //校验
        if(!flag){
            return;
        }
        var html=$("#FirstMsg").html();
        var arr = [];
        arr.push(formatTemplate(retInfo, html));
        $("#message-comment-body").prepend(arr.join(''));
        $(frameObj).html("");//清空文本域
        layui.timeago.render($('.timeago'));
    }




    /**
     * 保存评论
     * */
    function saveMsg(obj,parentId){

        //获取回复信息
        var frameObj = $(obj).parent().prev();
        var msg = $(frameObj).html().replace(/&nbsp;/ig,'');;//回复信息
        var receiver = $(obj).parent().parent().children(".receiver");
        var receiverUserId = $(obj).parent().parent().children(".receiverUserId");
        var commented = $(receiver).html();
        var commentedId = $(receiverUserId).val();
        var replyEntity={};
        replyEntity.userId=currentUserId;
        replyEntity.commentedUserId=commentedId;
        replyEntity.content=msg;
        replyEntity.level=2;
        replyEntity.type=3;
        replyEntity.bindId=$("input[name=id]").val();
        replyEntity.parentId=parentId;
        var flag=false;
        var retInfo={};
        $.ajax({
            url:"/userComment/saveChildrenMessage",
            type:"POST",
            data:replyEntity,
            async:false,
            success:function (e) {
                if(e.success){
                    retInfo=e.data;
                    flag=true;
                }else{
                    layui.layer.alert(e.message);
                }
            },dataType:"json"
        });
        //校验
        if(!flag){
            return;
        }
        var prev = $(obj).parent().parent().prev();
        if($(prev).is(":hidden")){
            $(prev).show();
        }

        var html = $("#childMsg").html();
        var arr = [];
        arr.push(formatTemplate(retInfo, html));
        $(prev).append(arr.join(''));//追加回复信息
        var show = $(obj).parent().parent().prev().prev().find(".show");//展开按钮
        $(show).html("关闭");

        $(frameObj).html("");//清空回复框
        layui.timeago.render($('.timeago'));
    }
</script>
<script>
    layui.config({base:'/layui/extends/'});
    layui.use(['layer','timeago','laypage'], function(){
        var timeago = layui.timeago,
            laypage = layui.laypage,
            layer=layui.layer;
        timeago.render($('.timeago'));

        //自定义样式
        var count =100;
        $.ajax({
            url:"/util/httpStatusCode/getTotal",
            type:"POST",
            async:false,
            data:{},
            success:function (e) {
                count=e.data;
            },dataType:"json"
        });

        laypage.render({
            elem: 'demo2'
            ,count: count
            ,theme: '#1E9FFF'
            ,jump: function(obj, first) {
                $.ajax({
                    url:"/util/httpStatusCode/queryData",
                    type:"POST",
                    data:{"page":obj.curr,"limit":obj.limit},
                    success:function (e) {
                        $("#tbody").empty();
                        for(var i=0 ;i<e.data.length;i++){
                            $("#tbody").append(" <tr><td>"+e.data[i].code+"</td><td>"+e.data[i].flag+"</td><td>"+e.data[i].description+"</td></tr>");
                        }
                    },dataType:"json"
                });
                //首次不执行
                if (!first) {
                    //do something
                }
            }});
    });
</script>
</body>
</html>